import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Tabs, Spin } from 'antd';
import 'moment/locale/zh-cn';
import { FirstHeaderC, FixedButtonC, PrimaryGhostC } from '../../../../../comps';
import TotalViewC from './totalViewC';
import TotalTableC from './totalTableC';
import YieldRiskC from './yieldRiskC';
import moment from 'moment';

const { TabPane } = Tabs;
const config = [
  {
    title: '总览',
    key: '1',
  },
  {
    title: '收益风险',
    key: '2',
  },
  // {
  //   title: '有效前沿',
  //   key: '3'
  // }
];
@connect(({ portfolioOptimizationM, workStationM, loading }) => ({
  portfolioOptimizationM,
  workStationM,
  loading,
}))
export default class ResultIndexC extends PureComponent {
  state = {
    tab: '1',
    resultDataObj: {
      config: {
        dataSource: [],
      },
      performComp: {
        dataSource: [],
      },
      exposureComp: {},
    }, //结果页数据
    row: undefined, //每行详情
  };

  componentDidMount() {}

  componentWillUnmount() {
    // 离开前清除models数据
  }
  getRow = (row) => {
    this.setState(
      {
        row: row,
      },
      () => {
        if (row) this.queryResultDetail(row?.id);
      },
    );
  };
  queryResultDetail = (id) => {
    this.props.dispatch({
      type: 'portfolioOptimizationM/queryResultDetail',
      payload: { id, fromBarra: this.props.fromBarra },
      callback: (data) => {
        this.setState({
          resultDataObj:
            JSON.stringify(data) == '{}' || data == undefined
              ? {
                  config: {
                    dataSource: [],
                  },
                  performComp: {
                    dataSource: [],
                  },
                  exposureComp: {},
                }
              : data, //结果页数据
        });
      },
    });
  };
  render() {
    const { loading, fromBarra } = this.props; //fromBarra来自barra工作台
    const initComp = (key) => {
      if (key === '1')
        return (
          <Spin spinning={loading.effects['portfolioOptimizationM/queryResultDetail'] == true}>
            <TotalViewC data={this.state.resultDataObj} fromBarra={fromBarra} row={this.state.row} />
          </Spin>
        );
      if (key === '2') return <YieldRiskC type={key} id={this.state.row?.id} fromBarra={fromBarra} 
      taskId={this.state.row?.taskId} 
      />;
      if (key === '3') return <a>{key}</a>;
    };

    return (
      <div>
        {fromBarra ? (
          <>
            <FirstHeaderC title={'组合优化分析结果'} />
            <TotalTableC
              getRow={this.getRow}
              fromBarra
              onChangeStatus={(e, type) => {
                this.props.changeStatus('1');
                this.props.changeType(e, type);
              }}
            />
            {this.state.row?.id && (
              <Tabs
                activeKey={this.state.tab}
                onChange={(val) => {
                  this.setState({ tab: val });
                }}
              >
                {config.map((item) => {
                  return (
                    <TabPane tab={item.title} key={item.key}>
                      {initComp(item.key)}
                    </TabPane>
                  );
                })}
              </Tabs>
            )}
            <div className={'footerBtn'} style={{ textAlign: 'right', width: '100%', marginTop: '5px' }}>
              <PrimaryGhostC
                title='返回'
                onClick={() => {
                  this.props.changeStatus('1', '1');
                }}
              />
            </div>
          </>
        ) : (
          <FixedButtonC
            topHtml={
              <>
                <FirstHeaderC title={'组合优化分析结果'} />
                <TotalTableC
                  getRow={this.getRow}
                  onChangeStatus={(e, type) => {
                    this.props.changeStatus('1');
                    this.props.changeType(e, type);
                  }}
                />
                {this.state.row?.id && (
                  <Tabs
                    activeKey={this.state.tab}
                    onChange={(val) => {
                      this.setState({ tab: val });
                    }}
                  >
                    {config.map((item) => {
                      return (
                        <TabPane tab={item.title} key={item.key}>
                          {initComp(item.key)}
                        </TabPane>
                      );
                    })}
                  </Tabs>
                )}
              </>
            }
            otherHeight={50}
            bottomHtml={
              <div style={{ width: '100%' }} className={'footerBtn'}>
                <PrimaryGhostC
                  title='返回'
                  onClick={() => {
                    this.props.changeStatus('1', '1');
                  }}
                />
              </div>
            }
          />
        )}
      </div>
    );
  }
}
